@extends('layouts.system')

@section('css')
    <style type="text/css">
        .checkLink, .checkLink:focus, .checkLink:hover, .checkLink:active {
            color: #06b55a;
        }

        .selDiv {
            width: 100px;
            padding: 0;
        }

        .selDiv button {
            width: 90px;
            border-radius: 5px;
        }

        .selFile {
            width: 90px;
            border-radius: 5px;
            margin-left: 30px;
        }

        .selFile button {
            width: 90px;
            border-radius: 5px;
        }

        .modal-backdrop {
            z-index: 1030;
        }
    </style>
@endsection

@section('content')
    <div id="cl-wrapper" class="fixed-menu">
        <div class="container-fluid" id="pcont">

            <div class="col-md-12" style="padding-right: 0;">
                <div class="block-flat">
                    <div class="header">
                        <div class="pull-left">
                            <p class="jb_underline">任务管理&#62;&#62;任务审核&#62;&#62;{{$info['title']}}</p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="content">
                        <div class="table-responsive">
                            <div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="pull-left"
                                             style="background-color: #ddd; margin: 10px 0; padding:10px 50px;">
                                            <div id="datatable-icons_length" class="dataTables_length col-sm-2"
                                                 style="width: 150px;">
                                                <select size="1" v-model="type" class="form-control">
                                                    <option value="user_id">用户ID</option>
                                                    <option value="name" selected="selected">用户名</option>
                                                </select>
                                            </div>
                                            <div class="col-sm-2" style="width: 250px;">
                                                <input id="searchUserName" v-model="keyword" type="text" class="form-control"
                                                       placeholder="关键词">
                                            </div>
                                            <div class="col-sm-2" style="width: 100px;">
                                                <button v-on:click="search" type="button" class="btn btn-default">搜索</button>
                                            </div>

                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="pull-left" style="margin: 10px 0; padding:10px 0;">
                                            <div class="col-sm-2 selDiv">
                                                <button v-on:click="selectall(1)" type="button" class="btn btn-default">全选本页</button>
                                            </div>
                                            <div class="col-sm-2 selDiv">
                                                <button v-on:click="selectall(3)" type="button" class="btn btn-default">无</button>
                                            </div>
                                            <div class="col-sm-2 selDiv">
                                                <button v-on:click="selectall(2)" type="button" class="btn btn-default">全选全部</button>
                                            </div>
                                            <div class="col-sm-2 selDiv">
                                                <button v-on:click="exportFile(1)" type="button" class="btn btn-default">导出资料</button>
                                            </div>
                                            <div class="col-sm-2 selDiv">
                                                <button v-on:click="exportFile(2)" type="button" class="btn btn-default">导出当前</button>
                                            </div>
                                        </div>

                                        <div class="pull-right" style="margin: 10px 0; padding:10px 0;">
                                            <div class="col-sm-2 selDiv">
                                                <button v-on:click="verify(4)" type="button" class="btn btn-default">批量通过</button>
                                            </div>
                                            <div class="col-sm-2 selDiv">
                                                <button v-on:click="verify(3)" type="button" class="btn btn-default">批量驳回</button>
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <table class="table table-bordered" id="datatable-icons">
                                    <thead style="background-color: #ffd866;">
                                    <tr>
                                        <th>选择</th>
                                        <th>用户ID</th>
                                        <th>用户账号</th>
                                        <th>用户名</th>
                                        <th>领取时间</th>
                                        <th>提交时间</th>
                                        <th>提交图片</th>
                                        <th>提交文本</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="odd gradeX" v-for="(item , index ) in lists">
                                        <td>
                                            <label class="radio-inline">
                                                <input type="checkbox" v-bind:id="item.id" v-bind:value="item.id" v-model="checkboxlist" class="icheck">
                                            </label>
                                        </td>
                                        <td v-text="item.task_id"></td>
                                        <td v-text="item.account"></td>
                                        <td v-text="item.name"></td>
                                        <td v-text="item.created_at"></td>
                                        <td v-text="item.finish_time"></td>
                                        <td>
                                            <ul>
                                                <li v-for="(image,i) in item.images" style="float: left; margin: 5px;">
                                                    <a data-toggle="lightbox" v-bind:href="'#Lightbox_' + index + '_' + i">
                                                        <img v-bind:src=" '{{$static_url}}' + image " width="40" height="60">
                                                    </a>
                                                    <div v-bind:id=" 'Lightbox_' + index + '_' + i" class="lightbox fade"  tabindex="100000" role="dialog" aria-hidden="true">
                                                        <div class='lightbox-dialog'>
                                                            <div class='lightbox-content'>
                                                                <img v-bind:src=" '{{$static_url}}' + image ">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </td>
                                        <td v-text="item.order_mobile"></td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="row">
                                    <div class="pull-right">
                                        <div class="page">
                                            <page :current="current" :total="total" show-total
                                                  show-elevator @on-change="changePage"></page>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">

      Vue.use(VueResource)
      var vm = new Vue({
        el: '#pcont',
        data: {
          current: 1,
          total: 0,
          type: '',
          keyword: '',
          checkboxlist: [],
          checkboxall: false,
          checkboxpage: false,
          labels: {},
          states: {},
          lists: {}
        },
        created: function () {
          getLists(this);
        },
        methods: {
          changePage: function (current) {
            this._data.current = current
            getLists(this);
          },
          search: function () {
            this._data.current = 1;
            getLists(this);
          },
          changeType: function () {
            this._data.keyword = ''
          },
          selectall: function (type) {
            var _this = this
            console.log(_this.checkboxlist)
            if(type == 1 || type == 2) {
              _this.checkboxlist = []
              $.each(_this.lists,function (index,item) {
                _this.checkboxlist.push(item.id)
              })
              if(type == 1) {
                _this.checkboxall =  false;
                _this.checkboxpage =  true;
              }
              if(type == 2) {
                _this.checkboxpage =  false;
                _this.checkboxall =  true;
              }
            }
            if(type == 3) {
              _this.checkboxpage =  false;
              _this.checkboxall =  false;
              _this.checkboxlist = []
            }
            console.log(_this.checkboxlist)
          },
          verify: function (state) {
            verify(this,state)
          },
          exportFile: function (type) {
            window.open("/admin/task/exportOrderLists/{{$info['id']}}?type="+type);
          }
        }
      })

      // 获取列表
      function getLists(_vm) {
        var params = {
          current: _vm._data.current
        }
        var conditions = {
          type: _vm._data.type,
          keyword: _vm._data.keyword
        }
        params = $.extend(params, conditions)
        _vm.$http.get('/admin/task/getVerifyOrderLists/{{$info['id']}}', {params: params})
          .then(function (response) {
            var json = response.body;
            console.log('json:')
            console.log(json)
            if (json.state == 1) {
              _vm._data.lists = json.data.lists;
              _vm._data.total = json.data.total;
              if(_vm.checkboxall) {
                _vm.selectall(2)
              }
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      }

      //审核
      function verify(_vm, state) {
        var data = {
          state: state,
          checkboxall: _vm.checkboxall,
          order_lists: _vm.checkboxlist
        }
        _vm.$http.post('/admin/task/verifyOrder/{{$info['id']}}', data, {headers: header()})
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              alert('操作成功')
              getLists(_vm);
            }

          })
          .catch(function (response) {
            console.log(response)
          })
      }

    </script>
@endsection